<svg viewBox="0 0 100 100">
	<circle
		id="c1"
		cx="50"
		cy="50"
		r="10"
		stroke="#fff"
		stroke-width="1.5"
		storke-linecap="round;"
		stroke-dasharray="100"
		stroke-dashoffset="100"
		fill="#f40"
	/>
</svg>

<style>
	/* your styles go here */
	svg {
		widows: 400px;
		height: 400px;
		/* background-color: #fff; */
	}
	#c1 {
		transform-origin: center;
		animation: move 1s ease 1s infinite reverse;
	}
	@keyframes move {
		0% {
			stroke-opacity: 0;
			stroke-dashoffset: -100;
		}

		100% {
			stroke-opacity: 1;
			stroke-dashoffset: 100;
			/* transform: scale(1.5); */
		}
	}
</style>
